<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=”renderer” content=”webkit”>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>东明家居集团-活动分析管理系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/iview.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<link href="js/toastr/toastr.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" id="app">
     <!-- breadcrumb -->
      <template class="page-header">
          <breadcrumb class="pull-left">
              <breadcrumb-item to="welcome.html" >首页</breadcrumb-item>
              <breadcrumb-item>项目管理</breadcrumb-item>
          </breadcrumb>
      </template>
      <!-- 搜索条件 -->
      <div class="table-margin">
          <row span="24"> 
               <!-- 左侧树型结构 -->
               <i-col span="5" offset="1"> 
                   <tree :data="data1"></tree>
               </i-col>
               <!-- 右侧 -->
               <i-col span="18">
                      <!-- 添加各级项目 -->
                      <row><h1>第一步：请录入所有项目分类：</h1></row>
                      <row class="mb20">
                           <i-col span="7" class="mt20" >
                                 <i-form v-model="formItem" label-position="right" :label-width="105">
                                        <row>
                                            <i-col>
                                                <Form-item label="选择分类：">
                                                      <i-select v-model="formItem.Type" placeholder="选择分类">
                                                              <i-option value="收入">收入</i-option>
                                                              <i-option value="支出">支出</i-option>
                                                      </i-select> 
                                                </Form-item>
                                            </i-col>                                                     
                                            <i-col>
                                                <Form-item label="添加一级分类：">
                                                      <i-input v-model="formItem.FirstLevel" placeholder="请输入一级分类名称" ></i-input>
                                                </Form-item>
                                            </i-col>                                                                      
                                       </row>
                                       <row>
                                            <i-col>
                                                <i-button type="primary" class="mr10" style="margin-left:105px;" @click="saveFirstLevel">保存</i-button>
                                            </i-col>
                                       </row>                      
                                 </i-form>
                           </i-col>
                           <i-col span="7" offset="1" class="mt20" >
                                 <i-form v-model="secondformItem" label-position="right" :label-width="105">
                                        <row>
                                            <i-col>
                                                <Form-item label="选择一级分类：">
                                                    <i-select v-model="secondformItem.FirstLevel" placeholder="一级分类">
                                                        <i-option v-for="item in FirstLevelList" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                                    </i-select>
                                                </Form-item>
                                            </i-col>                                                     
                                            <i-col>
                                                <Form-item label="添加二级分类：">
                                                      <i-input v-model="secondformItem.SecondLevel" placeholder="请输入二级分类名称" ></i-input>
                                                </Form-item>
                                            </i-col>                                                                      
                                       </row>
                                       <row>
                                            <i-col>
                                                <i-button type="primary" class="mr10" style="margin-left: 105px;" @click="saveSecondLevel">保存</i-button>
                                            </i-col>
                                       </row>                      
                                 </i-form>
                           </i-col>   
                           <i-col span="7" offset="1" class="mt20" >
                                 <i-form v-model="thirdformItem" label-position="right" :label-width="105">
                                        <row>
                                            <i-col>
                                                <Form-item label="选择一级分类：">
                                                    <i-select v-model="thirdformItem.FirstLevel" placeholder="一级分类" @on-change="querySecondLevel(thirdformItem.FirstLevel)">
                                                        <i-option v-for="item in FirstLevelListT" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                                    </i-select>
                                                </Form-item>
                                            </i-col>    
                                            <i-col>
                                                <Form-item label="选择二级分类：">
                                                      <i-select v-model="thirdformItem.SecondLevel" placeholder="选择二级分类">
                                                          <i-option v-for="item in SecondLevelList" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                                      </i-select> 
                                                </Form-item>
                                            </i-col>                                                                                    
                                            <i-col>
                                                <Form-item label="添加三级分类：">
                                                      <i-input v-model="thirdformItem.ThirdLevel" placeholder="请输入三级分类名称" ></i-input>
                                                </Form-item>
                                            </i-col>                                                                      
                                       </row>
                                       <row>
                                            <i-col>
                                                <i-button type="primary" class="mr10" style="margin-left:105px;" @click="saveThirdLevel">保存</i-button>
                                            </i-col>
                                       </row>                      
                                 </i-form>
                           </i-col>     
                      </row>     
                     
                      <!-- 绑定部门 -->
                      <row><h1>第二步：请把项目类别绑定部门：</h1></row>
                      <row class="mt20" >
                          <i-form v-model="bindformItem" label-position="right" :label-width="105">
                            <row>
                                <i-col span="8">
                                    <Form-item label="选择一级分类：">
                                          <i-select v-model="bindformItem.FirstLevel" placeholder="选择一级分类" @on-change="queryBindSecondLevel(bindformItem.FirstLevel)">
                                              <i-option v-for="item in BindFirstLevelList" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                          </i-select> 
                                    </Form-item>
                                </i-col>
                              </row> 
                              <row>   
                                <i-col span="8">
                                    <Form-item label="选择二级分类：">
                                          <i-select v-model="bindformItem.SecondLevel" placeholder="选择二级分类" @on-change="queryBindThirdLevel(bindformItem.SecondLevel)">
                                              <i-option v-for="item in BindSecondLevelList" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                          </i-select> 
                                    </Form-item>
                                </i-col> 
                              </row>
                              <row>                          
                                <i-col span="8"> 
                                    <Form-item label="选择三级分类：">
                                          <i-select v-model="bindformItem.ThirdLevel" placeholder="选择三级分类">
                                              <i-option v-for="item in BindThirdLevelList" :value="item.value"  :key="item.value">{{item.label}}</i-option>
                                          </i-select> 
                                    </Form-item>
                                </i-col>
                              </row> 
                              <row>
                                <i-col span="8"> 
                                    <Form-item label="选择部门：">
                                          <i-select v-model="bindformItem.Bm" placeholder="选择部门">
                                                  <i-option value="财务科">财务科</i-option>
                                                  <i-option value="办公室">办公室</i-option>
                                                  <i-option value="销售部">销售部</i-option>
                                                  <i-option value="策划部">策划部</i-option>
                                          </i-select> 
                                    </Form-item>
                                </i-col>
                              </row>
                              <row>                                 
                                <i-col span="8">
                                    <i-button type="primary" style="margin-left:105px;" @click="BindBm">设置</i-button>
                                </i-col>
                              </row>
                          </i-form> 
                      </row>                       
               </i-col>
          </row>
      </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/iview.min.js"></script>
<script src="js/toastr/toastr.min.js"></script>
<script src="js/category/category.js"></script>
</html>